<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Document</title>
        <style type="text/css">
            #right,#op,#left{
           float: left;
           width: 100px;
           height: 200px;}
        </style>
        <script type="text/javascript">

    function moveOne(fromid,toid) {
        var from =document.getElementById(fromid);
        var to =document.getElementById(toid);
        var index=from.selectedIndex;
        if(index<0){
            return;
        }
        /*    alert(index);*/
        options=from.getElementsByTagName('option');
        var item = options[index].cloneNode(true);
        to.appendChild(item);
        options[index].remove();

    }
    function moveAll(formid,toid) {
        var from =document.getElementById(formid);
        var to =document.getElementById(toid);

        var index=from.selectedIndex;

        var opts=to.getElementsByTagName("option");
        var from_opts=from.getElementsByTagName("option");
        /*    alert(opts.length);
                     alert(from_opts.length);*/
        if(from_opts.length==0){
            return;
        }
        for (var i = 0;i<opts.length;) {
            opts[0].remove();

        }
        for (var i = 0;i<from_opts.length;) {
            var item=from_opts[0].cloneNode(true);
            to.appendChild(item);
            from_opts[0].remove();

        }


        /*    var select=to.cloneNode(true);
                  to.remove();
                  var body=document.getElementById("body");
                  body.appendChild(select);*/
    }
</script>
</head>
<body id="body">
    <select size="8" name="" id="left">
            <option value="">貂蝉</option>
            <option value="">西施</option>
            <option value="">杨玉环</option>
            <option value="">王昭君</option>
            
        </select>
    <div id="op">
            <input type="button" value=">"   onclick="moveOne('left','right')"><br><br>
            <input type="button" value=">>"  onclick="moveAll('left','right')"><br><br>
            <input type="button" value="<" onclick="moveOne('right','left')"><br><br>
            <input type="button" value="<<" onclick="moveAll('right','left')"><br><br>
        </div>
    <select name="" id="right" size="8">
            <option value="">沉鱼</option>
            <option value="">落雁</option>
            <option value="">闭月</option>
            <option value="">羞花</option>
        </select>
</body>
</html>
